<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title id="title"></title>
    <!-- Favicon -->
    <link rel="shortcut icon" href="../src/images/1.ico"/>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="../src/css/bootstrap.min.css">
    <!-- Typography CSS -->
    <link rel="stylesheet" href="../src/css/typography.css">
    <!-- Style CSS -->
    <link rel="stylesheet" href="../src/css/style.css">
    <!-- Responsive CSS -->
    <link rel="stylesheet" href="../src/css/responsive.css">
    <link rel="stylesheet" href="../src/js/dalao/css/register.css">
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="../src/js/jquery.min.js"></script>
    <script src="../src/js/popper.min.js"></script>
    <script src="../src/js/bootstrap.min.js"></script>
    <!-- Appear JavaScript -->
    <script src="../src/js/jquery.appear.js"></script>
    <!-- Countdown JavaScript -->
    <script src="../src/js/countdown.min.js"></script>
    <!-- Counterup JavaScript -->
    <script src="../src/js/waypoints.min.js"></script>
    <script src="../src/js/jquery.counterup.min.js"></script>
    <!-- Wow JavaScript -->
    <script src="../src/js/wow.min.js"></script>
    <!-- Apexcharts JavaScript -->
    <script src="../src/js/apexcharts.js"></script>
    <!-- Select2 JavaScript -->
    <script src="../src/js/select2.min.js"></script>
    <!-- Owl Carousel JavaScript -->
    <script src="../src/js/owl.carousel.min.js"></script>
    <!-- Magnific Popup JavaScript -->
    <script src="../src/js/jquery.magnific-popup.min.js"></script>
    <!-- Smooth Scrollbar JavaScript -->
    <script src="../src/js/smooth-scrollbar.js"></script>
    <!-- Chart Custom JavaScript -->
    <script src="../src/js/chart-custom.js"></script>
    <!-- Custom JavaScript -->
    <script src="../src/js/custom.js"></script>
    <script src="../src/js/dalao/js/register.js"></script>
    <!--  vue  -->
    <script src="../src/js/vue.js"></script>
    <script>
        $(function () {
            //获取json文件中的内容
            $.getJSON('../public/port/ControllerPort.json', function (data) {
                //设置浏览器窗口显示文字
                $("#title").text("SignUp");
                //获取请求url路径
                let url = data.Url + ':' + data.Port + '/' + data.ProjectName + '/' + data.RegisterController + '/verifyUser';
                //注册方法
                let app = new Vue({
                    el: "#register",
                    data: {
                        UsernamePlaceholder: "username",
                        PasswordPlaceholder: "password",
                        //用户名提示信息
                        UsernameMessage: "用户名长度为4～18个字符、只能以字母开头、数字、点、减号或下划线组成",
                        //密码提示信息
                        PasswordMessage: "密码长度为4～10个字符、由任意字符组成",
                        AcceptMessage: "按下注册即代表您同意条款与条件",
                        //用户名
                        Username: "",
                        //密码
                        Password: "",
                        //账户名外框style风格
                        UsernameStyle: {},
                        //密码外框style风格
                        PasswordStyle: {},
                        //单选框状态
                        CheckStatus: false,
                        //加载状态
                        LoadingStatus: "",
                        LoadingColor: {
                            color: "red"
                        },
                        TermsAndConditions: {
                            title: "1. 欢迎使用 游我有你(I have you)",
                            content: "<p>\n" +
                                "&numsp;&numsp;1.1 I have you（以下简称“IHY”、“我们”、“我方”或“我们的”）\n" +
                                "提供： (1) 可以访问的 I have you 用户账户网站www.ihy.cn（以下简称“网站”），\n" +
                                "(2) 可以通过网站访问的服务（以下简称“网络应用程序”），术语“服务”指网站、网络应用程序和移动应用程序。\n" +
                                "</p>\n" +
                                "<h5>2. 您和我们之间的关系</h5>\n" +
                                "<p>\n" +
                                "&numsp;&numsp;2.1 本文档以及本文档中提及的任何文档（统称为“服务条款”）对您访问和使用服务具有约束效力。 请务必在使用服务前阅读并理解本服务条款。\n" +
                                "如果您不理解上述文档中的任何内容，请与我们联系。\n" +
                                "</p>\n" +
                                "<p>\n" +
                                "&numsp;&numsp;2.2 创建帐户或者使用和访问服务即代表您同意本服务条款。 如果您不同意本服务条款，请勿浏览或以其他方式访问或使用服务。\n" +
                                "</p>\n" +
                                "<h5> 3.创建帐户</h5>\n" +
                                "<p>\n" +
                                "&numsp;&numsp;3.1 要使用服务，您必须注册一个用户帐户（以下简称您的“帐户”）并在提示的注册表中提供关于您自己的特定信息。\n" +
                                "您同意您所提交的所有信息均真实准确并且您会及时更新此类信息。\n" +
                                "</p>\n" +
                                "<p>\n" +
                                "&numsp;&numsp;3.2 您应负责维护您的登录详细信息的机密性，以及在您帐户下发生的任何活动。\n" +
                                "</p>\n" +
                                "<h5> 4.您的服务使用权利</h5>\n" +
                                "<p>\n" +
                                "&numsp;&numsp;4.1 构成服务的材料和内容属于我方所有，我们许可您仅出于按照本服务条款使用服务的目的使用这些材料和内容。\n" +
                                "</p>\n" +
                                "<p>\n" +
                                "&numsp;&numsp;4.2 您的服务使用权利仅限于您个人，不允许将此权利授予其他人，或者将您的帐户出售、赠予或转让给其他人。\n" +
                                "您所拥有的服务使用权利不妨碍我们授予其他人服务使用权利。\n" +
                                "</p>\n" +
                                "<h5> 5.软件更新</h5>\n" +
                                "<p>\n" +
                                "&numsp;&numsp;5.1 我们可能会不时开发补丁、漏洞修复程序、更新和其他修改以提升服务或产品软件的性能（以下简称“更新”）。\n" +
                                "您同意我们在不作另行通知的情况下自动安装这些更新。\n" +
                                "</p>\n" +
                                "<p>\n" +
                                "&numsp;&numsp;5.2 您确认您可能需要按要求安装更新以使用服务和产品，并且您同意立即安装我们提供的任何更新。\n" +
                                "</p>\n" +
                                "<p>\n" +
                                "&numsp;&numsp;5.3 在更新后继续使用服务和产品即表示您继续同意本服务条款和条件。\n" +
                                "</p>\n" +
                                "<h5> 6.暂停</h5>\n" +
                                "<p>\n" +
                                "&numsp;&numsp;6.1 出于安全原因、系统故障、维护和维修或其他情况的考虑，我们可能会在不作另行通知的情况下暂停服务。 您同意您无权得到针对此类暂停的任何退款或返款。IHY\n" +
                                "不对服务的正常运行时间作出任何具体保证。\n" +
                                "</p>\n",
                            policy: "最后修订日期及生效日期为 2021 年 03 月 16 日。"
                        }
                    },
                    methods: {
                        register: function () {
                            //用户名正则表达式验证
                            let Patten = /^[a-zA-Z]\w{3,15}$/ig;
                            //判断用户名
                            if (app.Username === "" || app.Username == null) {
                                app.UsernamePlaceholder = "请填写账户名";
                                app.UsernameStyle.border = "1px solid #a94442";
                                app.CheckStatus = false;
                                return;
                            } else if (!Patten.test(app.Username)) {
                                app.Username = "";
                                app.UsernamePlaceholder = "账户名不合法";
                                app.UsernameStyle.border = "1px solid #a94442";
                                app.CheckStatus = false;
                                return;
                            } else {
                                app.UsernameStyle.border = null;
                                app.UsernamePlaceholder = "username";
                            }
                            //密码正则表达式验证
                            let Patten2 = /^\S{4,10}$/;
                            //判断密码
                            if (app.Password === "" || app.Password == null) {
                                app.PasswordPlaceholder = "请填写密码";
                                app.PasswordStyle.border = "1px solid #a94442";
                                app.CheckStatus = false;
                                return;
                            } else if (!Patten2.test(app.Password)) {
                                app.Password = "";
                                app.PasswordPlaceholder = "密码不合法";
                                app.PasswordStyle.border = "1px solid #a94442";
                                app.CheckStatus = false;
                                return;
                            } else {
                                app.PasswordStyle.border = null;
                                app.PasswordPlaceholder = "password";
                            }
                            if ((app.Username !== "" && app.Password !== "") && (app.UsernamePlaceholder === "username" && app.PasswordPlaceholder === "password")) {
                                app.CheckStatus = true;
                                //ajax访问后台注册方法
                                $.ajax({
                                    url: url,
                                    data: {
                                        username: app.Username,
                                        password: app.Password
                                    },
                                    type: "post",
                                    dataType: "json",
                                    success: function (status) {
                                        console.log(status)
                                        if (status === true) {
                                            location.href = "sign-in.html";
                                        } else {
                                            app.Username = "";
                                            app.UsernamePlaceholder = "账户已存在";
                                            app.UsernameStyle.border = "1px solid #a94442";
                                            app.Password = "";
                                            app.CheckStatus = false;
                                        }
                                    }
                                })
                            }
                        },
                        agree: function () {
                            app.CheckStatus = true;
                        }
                    }
                })
            });
        })
    </script>
</head>
<body>
<!-- loader Start -->
<div id="loading"></div>
<!-- loader END -->
<!-- Sign in Start -->
<section class="sign-in-page">
    <div class="container p-0" id="register">
        <div class="row no-gutters">
            <div class="col-sm-12 align-self-center">
                <div class="sign-in-from bg-white">
                    <h1 class="mb-0">注册</h1>
                    <p>注册您的账户名和密码以访问管理面板。</p>

                    <div class="form-group">
                        <label for="username">账户名</label>
                        <input maxlength="12" type="text" class="form-control mb-0" id="username"
                               placeholder="username" required="required" v-model="Username"
                               v-bind:title="UsernameMessage" v-bind:placeholder="UsernamePlaceholder" autocomplete
                               v-bind:style="UsernameStyle">
                        <div v-bind:style="LoadingColor" v-if="LoadingStatus!==''">{{ LoadingStatus }}</div>
                    </div>
                    <div class="form-group">
                        <label for="password">密码</label>
                        <input type="password" class="form-control mb-0" id="password" placeholder="password"
                               required="required" v-model="Password" v-bind:title="PasswordMessage" autocomplete
                               v-bind:placeholder="PasswordPlaceholder" v-bind:style="PasswordStyle">
                    </div>
                    <div class="d-inline-block w-100">
                        <div class="custom-control custom-checkbox d-inline-block mt-2 pt-1"
                             v-bind:title="AcceptMessage">
                            <input type="checkbox" class="custom-control-input" id="customCheck1" v-model="CheckStatus">
                            <label class="custom-control-label" for="customCheck1">我接受</label>&nbsp;<a href="#"
                                                                                                       data-toggle="modal"
                                                                                                       data-target="#myModal">条款和条件</a>
                        </div>
                        <button type="button" class="btn btn-primary float-right" v-on:click="register()"
                                data-trigger="hover" data-container="body" data-toggle="popover"
                                data-placement="bottom">注册
                        </button>
                    </div>
                    <div class="sign-info">
                        <span class="dark-color d-inline-block line-height-2">已经有账户了？ <a
                                href="sign-in.html">登录</a></span>
                        <ul class="iq-social-media">
                            <li><a href="#"><i class="ri-qq-line"></i></a></li>
                            <li><a href="#"><i class="ri-wechat-line"></i></a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!-- Modal -->
        <div class="modal fade " id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content" style="width: 170%;right: 35%;">
                    <div class="modal-header">
                        <div>
                            <i class="fa fa-info-circle" aria-hidden="true"></i>
                        </div>&nbsp;服务条款
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                    </div>
                    <div class="modal-content">
                        <br/>
                        <h5>{{ TermsAndConditions.title }}</h5>
                        <span v-html="TermsAndConditions.content"></span>
                        <h5>{{ TermsAndConditions.policy }}</h5>
                        <br/>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" data-dismiss="modal" v-on:click="agree()">我同意
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Sign in END -->
</body>
</html>